<template>
  <!-- 外层容器添加ref，用于获取初始位置 -->
  <div class="container" ref="navbarRef" :class="{ fixed: isFixed }">
    <div class="content">
      <div class="left">
        <span>
          <a href="">
            <img src="@/assets/images/cropped-logo-blue.png" alt="" />
          </a>
        </span>
      </div>
      <div class="right">
        <ul>
          <li><router-link to="/home">Home</router-link></li>
          <li><router-link to="/aboutus">About Us</router-link></li>
          <li><router-link to="/products">Products</router-link></li>
          <li><router-link to="/blog">Blog</router-link></li>
          <li><router-link to="/download">DownLoad</router-link></li>
          <li><router-link to="/contact">Contact</router-link></li>
          <li><button>Get A Quote</button></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 用于补偿固定定位导致的页面跳动（默认隐藏，固定时显示） -->
  <div class="navbar-placeholder" v-if="isFixed"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

// 获取导航栏DOM元素
const navbarRef = ref(null);
// 标记是否固定在顶部
const isFixed = ref(false);
// 导航栏初始距离顶部的距离（用于判断何时固定）
let navbarOffsetTop = 0;

onMounted(() => {
  // 获取导航栏初始位置（距离页面顶部的距离）
  navbarOffsetTop = navbarRef.value?.offsetTop || 0;

  // 定义滚动事件处理函数
  const handleScroll = () => {
    // 获取当前滚动距离（页面顶部到可视区顶部的距离）
    const scrollTop = window.scrollY || document.documentElement.scrollTop;

    // 当滚动距离 ≥ 导航栏初始位置时，固定导航栏
    isFixed.value = scrollTop >= navbarOffsetTop;
  };

  // 初始执行一次（处理页面刷新时已滚动的情况）
  handleScroll();

  // 监听滚动事件
  window.addEventListener("scroll", handleScroll);

  // 组件卸载时移除事件监听（避免内存泄漏）
  onUnmounted(() => {
    window.removeEventListener("scroll", handleScroll);
  });
});
</script>

<style scoped lang='scss'>
.container {
  width: 100%;
  height: 99.25px;
  padding-top: 3px;
  border: 0.667px solid #e5e5e5;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* 固定时避免背景透明穿透下方内容 */
  transition: all 0.3s; /* 添加强度动画，固定时更平滑 */

  /* 固定定位类（滚动到顶部时添加） */
  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999; /* 确保在其他内容上方 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 固定时添加阴影，区分层级 */
  }

  .content {
    width: 1170px;
    height: 99.25px;
    padding: 0 40px 0 30px;
    margin: 0 8.333px;
    display: flex;
    align-items: center;

    .left {
      width: 266px;
      height: 59.25px;
      padding: 20px;
      display: flex;
      align-items: center;

      span {
        padding-right: 16px;
        display: flex;
        align-items: center;

        a img {
          height: 59.25px;
        }
      }
    }

    .right {
      flex: 1;
      height: 99.25px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      ul {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 16px;
        font-weight: 600;

        li {
          cursor: pointer;
          height: 100%;
          display: flex;
          align-items: center;
          white-space: nowrap; /* 文字不换行 */
          margin: 0 4px;

          a {
            padding: 0 12px;
            height: 100%;
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #333;
            transition: color 0.3s;
          }

          &:hover a {
            color: #0e74bc;
          }

          &:last-child {
            margin-left: 8px;

            button {
              background-color: #0e74bc;
              color: white;
              border: none;
              padding: 10px 20px;
              border-radius: 4px;
              cursor: pointer;
              font-size: 16px;
              font-weight: 600;
              transition: background-color 0.3s;
              white-space: nowrap;
            }

            button:hover {
              background-color: #0a5ca0;
            }
          }
        }
      }
    }
  }
}

/* 补偿占位元素：高度与导航栏一致，避免固定时页面跳动 */
.navbar-placeholder {
  height: 99.25px; /* 与导航栏高度相同 */
}
</style>